<template>
    <div class="embroidery-design-warp">
        <section class="embroidery-design" :transRate="transRate">
            <div class="embroidery-design-container" :class="{ 'fixed': leftJoinRate }"
                :style="{ '--trans-rate': transRate }">
                <div class="embroidery-design-images"
                    :style="{ '--left-join-rate': leftJoinRate, '--h2-opacity-rate': optionRate, }" ref="images-box">
                    <h2>
                        Breaking industry boundaries, we unveil a brand-new embroidery experience guaranteed to impress.
                        <br />
                        Experience the perfect blend of quality, affordability, and creative expression with our
                        stunning embroidery on clothes.
                    </h2>
                    <figure>
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/emb-design-1.png')"
                            alt="">
                    </figure>
                    <figure>
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/emb-design-2.png')"
                            alt="">
                    </figure>
                    <figure>
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/emb-design-3.png')"
                            alt="">
                    </figure>
                    <figure>
                        <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/emb-design-4.png')"
                            alt="">
                    </figure>
                </div>
                <h3>
                    Breaking industry boundaries, we unveil a brand-new embroidery experience guaranteed to impress.
                    Experience the perfect blend of quality, affordability, and creative expression with our
                    stunning embroidery on clothes.
                </h3>
            </div>
        </section>
    </div>
</template>
<script>
export default {
    props: {
        cur_scroll: {
            type: Number,
            default: 0
        },
        scroll: {
            type: Number,
            default: 0
        },
        rate: {
            type: Number,
            default: 0
        },
        screen_height: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: 0
        },
    },
    data () {
        return {
            left_join_rate: 0,
            left_range: 0.3
        }
    },
    computed: {
        // 需要一个提前200px开始,然后到内容区域 left_range 屏的rate
        leftJoinRate () {
            const left_scroll = Math.max(this.cur_scroll - this.screen_height + 200, 0); // 触发阈值的滚动值
            const rate = this.$clamp(0, left_scroll / ((this.screen_height * this.left_range) + 200), 1)
            return rate
        },
        // 需要一个left结束后0.2 的rate
        optionRate () {
            return this.$clamp(0, (this.scroll - this.screen_height * this.left_range) / (this.screen_height * 0.2), 1)
        },
        // 最后 半屏 向上滚动
        transRate () {
            return this.$clamp(0, (this.rate - 0.5) / 0.5, 1)
        }
    },
    methods: {},

}
</script>
<style scoped lang="scss">
.embroidery-design {
    align-items: center;
    justify-content: center;
    height: calc(var(--screen-height) * 2);

    .embroidery-design-container {
        @keyframes mockScroll {
            0% {
                transform: translate3d(-50%, 0, 0);
            }

            100% {
                transform: translate3d(-50%, calc(var(--screen-height) * -1), 0);
            }
        }

        display: none;
        position: fixed;
        box-sizing: border-box;
        left: 50%;
        top: 78px;
        width: 1582px;
        height: var(--screen-height);
        transform: translate3d(-50%, 0, 0);
        transition: all 0.3s;

        animation: mockScroll 0s linear 0 forwards;
        animation-iteration-count: var(--trans-rate);

        &.fixed {
            display: inline-block;
        }

        .embroidery-design-images {
            z-index: 0;
            box-sizing: border-box;
            position: relative;
            width: 100%;
            height: var(--screen-height);
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            transform: translate3d(-100%, 0, 0);
            border-radius: 12px;

            @keyframes leftJoin {
                0% {
                    opacity: 0;
                    transform: translate3d(-100%, 0, 0);
                }


                40% {
                    opacity: 1;
                    transform: translate3d(-80%, 0, 0);
                }

                100% {
                    opacity: 1;
                    transform: translate3d(0, 0, 0);
                }
            }

            opacity: 0;
            animation: leftJoin 0s ease-out forwards;
            animation-iteration-count: var(--left-join-rate);

            & h2 {
                @keyframes h2-opacity {
                    0% {
                        opacity: 0;
                    }

                    100% {
                        opacity: 1;
                    }
                }

                font-family: Roboto-Medium,
                Roboto;
                font-weight: 500;
                font-size: 24px;
                color: #FFFFFF;
                line-height: 44px;

                z-index: 1;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%, -50%, 0);
                text-align: center;
                width: 70%;
                padding: 30px 60px;
                color: #fff;

                background: rgba(0, 0, 0, 0.5);
                box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.2);
                border-radius: 16px;
                border: 1px solid rgba(0, 0, 0, 0.12);
                opacity: 0;
                animation: h2-opacity 0s linear forwards;
                animation-iteration-count: var(--h2-opacity-rate)
            }

            figure {
                @keyframes leftJoinItem {
                    0% {
                        transform: translate3d(var(--translateX), 0, 0);
                    }

                    1% {
                        transform: translate3d(calc(var(--translateX) * 0.5), 0, 0);
                    }

                    80% {
                        transform: translate3d(calc(var(--translateX) * 0.5), 0, 0);
                    }

                    100% {
                        transform: translate3d(0, 0, 0);
                    }
                }

                width: 25%;
                height: auto;

                border-radius: 10px;

                img {
                    width: 100%;
                    height: auto;
                    border-radius: 10px;
                }

                &:not(:last-child) {
                    margin-right: 16px;
                }

                animation: leftJoinItem 0s linear forwards;
                animation-iteration-count: var(--left-join-rate);

                &:nth-child(2) {
                    --translateX: 0;
                }

                &:nth-child(3) {
                    --translateX: -15vw;
                }

                &:nth-child(4) {
                    --translateX: -30vw;
                }

                &:nth-child(5) {
                    --translateX: -45vw;
                }
            }
        }

        h3 {
            display: none
        }
    }

}

.embroidery-design-warp.animation-none {
    --trans-rate: 0 !important;

    .embroidery-design {
        min-height: auto;
        height: auto;
    }

    .embroidery-design-container {
        display: block;
        position: relative;
        top: auto;
        height: auto;
        animation: none;

        .embroidery-design-images {
            --h2-opacity-rate: 0 !important;
            --left-join-rate: 1 !important;
            padding: 0 14px;
            height: auto;
            // animation: none;

            h2 {
                animation: none;
            }

            figure {
                // animation: none;
            }

            figure:not(:last-child) {
                margin-right: 6px;
            }
        }

        h3 {
            margin-top: 24px;
            padding: 0 14px;
            display: inline-block;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 16px;
            color: #000000;
            line-height: 24px;
            text-align: center;
        }
    }
}

@media (max-width: 1640px),
(max-height: 768px) {

    // 窄屏
    .embroidery-design-container {
        width: 1200px !important;
    }
}

@media (max-width: 1240px),
(max-height: 600px) {

    // 窄屏
    .embroidery-design-container {
        width: 960px !important;
    }
}

@media (max-width: 960px),
(max-height: 600px) {
    // 移动端适配
}
</style>